<template>
  <div class="tpl49-head">
    <div class="tpl-swipe">
      <div v-if="tplItemData.content && tplItemData.content.showType == 1">
        <section class="members_flash">
          <!-- TODO 小程序端用swiper -->
          <wx-swiper :style="{height:imgadvWxH}" :circular="true" indicator-color="#ebedf0" @change="changeWxSwiper" indicator-active-color="#FE5000" :autoplay="autoplay" :indicator-dots="showIndicators">
            <wx-swiper-item v-for="(item,index) in tplItemData.content.dataset" :key="index">
              <a href="javascript:;" @click="openLink(item.link)">
                <img class="img" :src="item.pic" @load="onImageLoad($event)"/>
              </a>
            </wx-swiper-item>
          </wx-swiper>
          <div v-show="title" class="img-title">{{title}}</div>
          <!-- <van-swipe v-else :autoplay="3000">
            <van-swipe-item v-for="(item, index) in tplItemData.content.dataset" :key="index">
              <a @click="openLink(item.link)" title="VERO">
                <img class="img" :src="item.pic" />
              </a>
            </van-swipe-item>
          </van-swipe> -->
        </section>
      </div>
  
      <div v-else>
        <section class="members_imgad">
          <ul class="clearfix">
            <li data-index="0" v-for="(item,index) in tplItemData.dataset" :key="index">
              <a @click="openLink(item.link)" title="VERO">
                <img :src="item.pic" width="100%">
              </a>
              <div v-show="item.showtitle" class="img-title">{{item.showtitle}}</div>
            </li>
          </ul>
        </section>
      </div>
      
      <div
        v-for="(item, index) in storeList"
        :key="index"
        v-if="index == 0"
        class="common-bottom-store-item">
        <div class="store-info">
          <div class="store-info-img">
            <img :src="item.imgdir || 'https://img.wifenxiao.com/h5-wfx/images/public/imgError.jpg'" alt="">
          </div>
          <div class="store-info-wrap">
            <div class="title">{{ item.shop_name }}</div>
            <div class="local">{{ item.province_city_area }}</div>
            <div class="local">{{ item.address }}</div>
          </div>
          <div class="store-info-btn">
            <div class="btn">
              <a @click="openLink(item.link)">
                  <span>
                    <span>进店</span><img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/store_next.png" alt="">
                  </span>
              </a>
            </div>
            <div class="distance">{{ item.distance || 0 }} km</div>
          </div>
        </div>
        <div class="store-btn">
          <a @click="handleClickCheckMap(item)" class="btn-item">查看地图</a>
          <a @click="wxPhoneCall(item.phone)" class="btn-item">联系服务顾问</a>
        </div>
      </div>
      
      
    </div>
    
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  import { isAPP } from '@/utils/validate'
  import { storeList } from '@/api/shop'
  import small from '@/smallapp/small'
  export default Vue.extend({
    props: {
      tplItemData: {
        type: Object
      }
    },
    data() {
      return {
        showIndicators: true,
        autoplay: true,
        imgadvWxH: 0,
        storeList: [
          // { imgdir: '', shop_name: '12312323', province_city_area: '浙江省杭州市', distance: 11.2 }
        ],
        title: ''
      }
    },
    mounted() {
      this.getStoreList()
      this.title = this.tplItemData.content.dataset[0].showtitle
    },
    methods: {
      // onChange(index) {
      //   this.title = this.tplItemData.content.dataset[index].showtitle
      //   // console.log(index, this.title)
      // },
       // TODO 小程序端wx滑动
      changeWxSwiper(event) {
        // console.log(event)
        const current = event.detail.current
        // console.log(current)
        // console.log('222',  this.tplItemData.content.dataset[current].showtitle)
        this.title = this.tplItemData.content.dataset[event.detail.current].showtitle
      },
      openLink(link) {
        if (link) {
          openPage(link)
        }
      },
      // 小程序swiper获取图片高度
      onImageLoad(event){
        const imgHeight = event.detail.height
        if(imgHeight > parseFloat(this.imgadvWxH)){
          this.imgadvWxH = imgHeight+'px'
        }
      },
      // 获取门店列表数据
      getStoreList() {
        storeList().then(res => {
          if (res.status == 1) {
            this.storeList = res.data.list
          }
        })
      },
      // TODO 微分销与小程序差别：拨打电话
      wxPhoneCall(phone) {
        wx.makePhoneCall({
          phoneNumber: phone
        })
      },
      // 点击查看地图
      handleClickCheckMap(item) {
        // TODO 小程序调用第三方地图
          wx.openLocation({
            latitude: Number(item.latitude),
            longitude: Number(item.longitude),
            scale: 28,
            name: item.shop_name,
            address: item.address
          })
      },
      locationLink(item, type) {
        let url = ''
        if (type == 1) {
          url = 'https://m.amap.com/navi/?dest=' + item.longitude + ',' + item.latitude + '&destName=' + item.shop_name + '&addr=' + item.address + '&key=552f0986c98fa36d395d95d52f3e9706'
        } else if (type == 2) {
          url = 'https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:' + item.latitude + ',' + item.longitude + ';title:' + item.shop_name + ';addr:' + item.address + '&key='+small.wxCache('tencentMapKey')+'&referer=storelocation'
        }
        location.href = url
      }
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .tpl49-head{
    .tpl-swipe{
      .members_flash{
        font-size: 0;
        .img{
          width: 100%;
        }
      }
      .common-bottom{
        &-store{
          padding: 0 20px;
          &-item{
            background: #fff;
            border-radius: 20px;
            margin-bottom: 20px;
            .store-info{
              display: flex;
              padding: 25px;
              border-bottom: 1px solid #EDEDED;
              &-img{
                width: 125px;
                height: 125px;
                border-radius: 10px;
                overflow: hidden;
                margin-right: 16px;
                img{
                  width: 100%;
                }
              }
              &-wrap{
                flex: 1;
                max-width: 380px;
                display: flex;
                flex-flow: column;
                justify-content: space-between;
                .title{
                  color: #333333;
                  // font-size: 28px;
                  font-weight: bold;
                  // margin-bottom: 18px;
                  @include lineClamp(28px,36px,1);
                  height: 36px;
                }
                .local{
                  line-height: 40px;
                  font-size: 24px;
                  color: #666666;
                }
              }
              &-btn{
                text-align: right;
                padding-top: 20px;
                .btn{
                  width: 130px;
                  text-align: center;
                  color: #F21228;
                  border: 2px solid #F21228;
                  border-radius: 50px;
                  padding: 12px 0;
                  span{
                    @include alignTop;
                    line-height: 24px;
                    font-size: 24px;
                    height: 24px;
                    .icon{
                      vertical-align: -2px;
                      width: 10px;
                      height: 20px;
                      margin-left: 6px;
                    }
                  }
                }
                .distance{
                  color: #666;
                  margin-top: 15px;
                }
              }
            }
            .store-btn{
              font-size: 0;
              padding: 20px 0;
              white-space: nowrap;
              .btn-item{
                @include alignTop;
                width: 50%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 24px;
                color: #666;
                &:first-child{
                  border-right: 1px solid #ededed;
                }
              }
            }
          }
        }
      }
    }
  }
  .img-title {
    font-size: 36px;
    color: #333;
    padding: 30px;
  }
</style>
